Constrained Placement

I am having trouble building a dialog box similar to the picture below.

I am having trouble doing the constrained placements. Can someone help me?

My best try was:

DB dBox
DBE label_FunctionalIO
DBE listView_FunctionalIO
DBE btn_AddIn, btn_DelIn
DBE btn_AddOut, btn_DelOut
DBE label_In, label_Out
DBE listView_In, listView_Out

string test[2] = {"A", "B"}

void notFunc(DBE x){}
void notFunc(DB x){}

dBox = create("Function I/O", styleFixed)

left dBox
label_FunctionalIO = label(dBox, "Functional I/O")
label_FunctionalIO->"top"->"flush"
label_FunctionalIO->"left"->"flush"
label_FunctionalIO->"bottom"->"unattached"
label_FunctionalIO->"right"->"unattached"

label_In = label(dBox, "Inputs")
label_In->"top"->"aligned"->label_FunctionalIO
label_In->"left"->"flush"->label_FunctionalIO
label_In->"bottom"->"unattached"
label_In->"right"->"unattached"

listView_FunctionalIO = listView(dBox, 0, 100, 15, test)
listView_FunctionalIO->"top"->"flush"->label_FunctionalIO
listView_FunctionalIO->"left"->"aligned"->label_FunctionalIO
listView_FunctionalIO->"right"->"unattached"

btn_AddIn = button(dBox, rightArrow, notFunc)
btn_AddIn->"top"->"spaced"
btn_AddIn->"left"->"flush"->listView_FunctionalIO
btn_AddIn->"bottom"->"unattached"
btn_AddIn->"right"->"unattached"

listView_In = listView(dBox, 0, 100, 15, test)
listView_In->"top"->"flush"->label_In
listView_In->"left"->"flush"->btn_AddIn
listView_In->"bottom"->"unattached"
listView_In->"right"->"unattached"

btn_DelIn = button(dBox, leftArrow, notFunc)
btn_DelIn->"top"->"flush"->btn_AddIn
btn_DelIn->"left"->"aligned"->btn_AddIn
btn_DelIn->"bottom"->"unattached"
btn_DelIn->"right"->"unattached"

label_Out = label(dBox, "Outputs")
label_Out->"top"->"flush"->listView_In
label_Out->"left"->"aligned"->listView_In
label_Out->"bottom"->"unattached"
label_Out->"right"->"unattached"

btn_AddOut = button(dBox, rightArrow, notFunc)
btn_AddOut->"top"->"flush"->btn_DelIn
btn_AddOut->"left"->"aligned"->btn_DelIn
btn_AddOut->"bottom"->"unattached"
btn_AddOut->"right"->"unattached"


listView_Out = listView(dBox, 0, 100, 15, test)
listView_Out->"top"->"flush"->label_Out
listView_Out->"left"->"aligned"->label_Out
listView_Out->"bottom"->"form"
listView_Out->"right"->"form"

btn_DelOut = button(dBox, leftArrow, notFunc)
btn_DelOut->"top"->"flush"->btn_DelIn
btn_DelOut->"left"->"aligned"->btn_DelIn
btn_DelOut->"bottom"->"form"
btn_DelOut->"right"->"unattached"
show dBox

Re: Constrained Placement
O.Wilkop - Wed Apr 12 04:09:07 EDT 2017

Hey,

try:

DB dBox
DBE label_FunctionalIO
DBE listView_FunctionalIO
DBE btn_AddIn, btn_DelIn
DBE btn_AddOut, btn_DelOut
DBE label_In, label_Out
DBE listView_In, listView_Out

string test[2] = {"A", "B"}

void notFunc(DBE x){}
void notFunc(DB x){}

dBox = create("Function I/O", styleFixed)

left dBox
label_FunctionalIO = label(dBox, "Functional I/O")
label_FunctionalIO->"top"->"flush"
label_FunctionalIO->"left"->"flush"
label_FunctionalIO->"bottom"->"unattached"
label_FunctionalIO->"right"->"unattached"

listView_FunctionalIO = listView(dBox, 0, 200, 15, test)
listView_FunctionalIO->"top"->"flush"->label_FunctionalIO
listView_FunctionalIO->"left"->"form"
listView_FunctionalIO->"right"->"unattached"
listView_FunctionalIO->"bottom"->"form"

DBE spacer, lastSpacer;
bool bFirst = true;
int iIndex = 0
for (iIndex = 0; iIndex < 4; iIndex += 1)
{
        spacer = label(dBox, "             ");
        if(bFirst){
                spacer->"top"->"aligned" -> listView_FunctionalIO
                spacer->"left"->"spaced"->listView_FunctionalIO
                spacer->"bottom"->"unattached"
                spacer->"right"->"unattached"
        }else{
                spacer->"top"->"spaced" -> lastSpacer
                spacer->"left"->"aligned"->lastSpacer
                spacer->"bottom"->"unattached"
                spacer->"right"->"unattached"
        }
        bFirst = false;
        lastSpacer = spacer;
}

btn_AddIn = button(dBox, rightArrow, notFunc)
btn_AddIn->"top"->"flush" -> lastSpacer
btn_AddIn->"left"->"aligned"->lastSpacer
btn_AddIn->"bottom"->"unattached"
btn_AddIn->"right"->"unattached"

listView_In = listView(dBox, 0, 200, 15, test)
listView_In->"top"->"aligned"->listView_FunctionalIO
listView_In->"left"->"flush"->btn_AddIn
listView_In->"bottom"->"unattached"
listView_In->"right"->"unattached"


label_In = label(dBox, "Inputs")
label_In->"top"->"aligned"->label_FunctionalIO
label_In->"left"->"flush"->btn_AddIn
label_In->"bottom"->"unattached"
label_In->"right"->"unattached"


btn_DelIn = button(dBox, leftArrow, notFunc)
btn_DelIn->"top"->"flush"->btn_AddIn
btn_DelIn->"left"->"aligned"->btn_AddIn
btn_DelIn->"bottom"->"unattached"
btn_DelIn->"right"->"unattached"

label_Out = label(dBox, "Outputs")
label_Out->"top"->"flush"->listView_In
label_Out->"left"->"aligned"->label_In
label_Out->"bottom"->"unattached"
label_Out->"right"->"unattached"

listView_Out = listView(dBox, 0, 200, 15, test)
listView_Out->"top"->"flush"->label_Out
listView_Out->"left"->"aligned"->listView_In
listView_Out->"bottom"->"form"
listView_Out->"right"->"form"

DBE spacerBottom, lastSpacerBottom
bFirst = true;
for (iIndex = 0; iIndex < 4; iIndex += 1)
{
        spacerBottom = label(dBox, "             ");
        if(bFirst){
                spacerBottom->"top"->"aligned" -> listView_Out
                spacerBottom->"left"->"aligned"->btn_DelIn
                spacerBottom->"bottom"->"unattached"
                spacerBottom->"right"->"unattached"
        }else{
                spacerBottom->"top"->"spaced" -> lastSpacerBottom
                spacerBottom->"left"->"aligned"->lastSpacerBottom
                spacerBottom->"bottom"->"unattached"
                spacerBottom->"right"->"unattached"
        }
        bFirst = false;
        lastSpacerBottom = spacerBottom;
}

btn_AddOut = button(dBox, rightArrow, notFunc)
btn_AddOut->"top"->"spaced"->spacerBottom
btn_AddOut->"left"->"aligned"->btn_DelIn
btn_AddOut->"bottom"->"unattached"
btn_AddOut->"right"->"unattached"


btn_DelOut = button(dBox, leftArrow, notFunc)
btn_DelOut->"top"->"flush"->btn_AddOut
btn_DelOut->"left"->"aligned"->btn_AddOut
btn_DelOut->"bottom"->"form"
btn_DelOut->"right"->"unattached"
show dBox

You can adjust the listView widths by changing the "200" value in the declarations and the y-position of the buttons by adjusting the amount of spacer created in the for loops. If you don't want the buttons to be in the center you need to adjust the top- and left-placement of the btn_AddOut and btn_AddIn buttons to reference the same DBEs as the spacer does in the if(bFirst) part of the for loops.